<template>
  <div>
    <h2>我是首页</h2>
    <router-link to="/home/news"
                 tag="button">新闻</router-link>
    <router-link to="/home/message"
                 tag="button">消息</router-link>
    <router-view></router-view>
    <p>我是首页内容哈哈哈</p>
    <h2>{{message}}</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '你好啊',
      path: '/home/news'
    };
  },
  created() {
    console.log('home created');
    // this.$router.push('/home/news')
  },
  destroyed() {
    console.log("home destoryed");
  },
  // 这两个函数只有该组件被保持状态,使用了keep-alive时才是有效的
  activated() {
    this.$router.push(this.path)
  },
  deactivated() {
    // console.log(this.$route);
  },
  mounted() {

  },
  updated() {
  },
  beforeRouteLeave(to, from, next) {
    console.log(this.$route.path);
    this.path = this.$route.path
    next()
  },
  methods: {

  }
};
</script>

<style scoped>
</style>
